<template>
  <!--  顶部-->
  <van-notice-bar scrollable text="筛选班级、课程、任务功能，已完善" />

  <van-search v-model="keyword" placeholder="搜索" />

  <!--  第二行-->
  <van-dropdown-menu>
    <van-dropdown-item v-model="selectedCourse" title="选择课程" :options="courses" @close="data_filter=filtered()" />
    <van-dropdown-item v-model="projectType" title="任务类型" :options="projects" @close="data_filter=filtered()"/>
  </van-dropdown-menu>

  <van-pull-refresh v-model="loading" @refresh="onRefresh">
  <van-row justify="center">
    <van-col style="display: flex;flex-wrap: nowrap;">
      <van-divider dashed:true>{{data[0].name}}</van-divider>
      <van-divider dashed:true>{{data[0].stuId}}</van-divider>
    </van-col>
  </van-row>

  <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
    任务：{{courses[selectedCourse].text}}
  </van-notice-bar>

  <van-collapse v-model="activeCollapse" accordion>
    <van-collapse-item v-for="(item, index) in data_filter" :key="index" :title="item.name" icon="description-o" :v-show="item.course_name === courses[selectedCourse].text">
      <template #title>
        <span>{{item.task_name}}</span>
<!--        <van-tag type="primary" style="margin-left: 5px">{{item.class_name}}</van-tag>-->
      </template>
      <template #value>
        <div :class="submitStatusColor_score(item.scoreStatus)" style="font-weight: bold">{{ item.scoreStatus!=-1 ? item.scoreStatus : "未评分" }}</div>
      </template>
      <van-cell>
        <template #title>
          <span class="custom-title">完成情况：</span>
<!--          <van-tag type="success">{{item.teamwork ? "小组作业" : "个人作业"}}</van-tag>-->
        </template>
        <template #value>
          <div :class="submitStatusColor(item.submitStatus)">{{ item.submitStatus }}</div>
        </template>
      </van-cell>
    </van-collapse-item>
  </van-collapse>
  </van-pull-refresh>
</template>

<script setup lang="ts">
import { onMounted, type Ref, ref, type UnwrapRef} from 'vue';
import {showToast} from "vant";

const keyword = ref('');
const selectedTask = ref(0);
const selectedCourse = ref(0);
const projectType = ref(0);

const courses = ref([
  { text: '前端框架应用项目开发', value: 0 },
  { text: '专业技能综合实践（2024春季）', value: 1 },
  { text: '24春季进销存系统设计与实现', value: 2 },
  { text: '后端技术与项目开发', value: 3 },
  { text: '软件测试技术', value: 4 }
]);// 任务数组

const tasks = ref([
  { text: 'Vue3开发初体验', value: 0 },
  { text: 'Vue3组件化开发', value: 1 },
  { text: 'Vue3路由的使用', value: 2 },
  { text: '电影列表项目', value: 3 },
  { text: 'Vue自动化测试', value: 4 },
  { text: '状态管理Pinia', value: 5 },
  { text: '使用UI组件库', value: 6 },
]);// 任务数组

const projects = ref([
  { text: '全部', value: 0 },
  { text: '刷题', value: 1 },
  { text: '作品', value: 2 },

]);// 班级数组


const activeCollapse = ref('');

// const data = ref([]);
const data = ref([
  { name: '陈浩贤', class_name:'22软件3班' ,stuId:22002303 ,course_name:"前端框架应用项目开发" ,task_name:'Vue3开发初体验' ,scoreStatus: 85, completionStatus: '已完成', submitStatus: '已提交',teamwork:false,projectType:"作品" },
  { name: '陈浩贤', class_name:'22软件3班' ,stuId:22002303 ,course_name:"前端框架应用项目开发" ,task_name:'Vue3组件化开发' ,scoreStatus: 95, completionStatus: '已完成', submitStatus: '已提交',teamwork:false,projectType:"作品" },
  { name: '陈浩贤', class_name:'22软件3班' ,stuId:22002303 ,course_name:"前端框架应用项目开发" ,task_name:'Vue3路由的使用' ,scoreStatus: 100, completionStatus: '已完成', submitStatus: '已提交',teamwork:false,projectType:"作品" },
  { name: '陈浩贤', class_name:'22软件3班' ,stuId:22002303 ,course_name:"前端框架应用项目开发" ,task_name:'电影列表项目' ,scoreStatus: 95, completionStatus: '已完成', submitStatus: '已提交',teamwork:false,projectType:"作品" },
  { name: '陈浩贤', class_name:'22软件3班' ,stuId:22002303 ,course_name:"前端框架应用项目开发" ,task_name:'Vue自动化测试' ,scoreStatus: 99, completionStatus: '已完成', submitStatus: '已提交',teamwork:false,projectType:"作品" },// 数据
  { name: '陈浩贤', class_name:'22软件3班' ,stuId:22002303 ,course_name:"前端框架应用项目开发" ,task_name:'期末刷题' ,scoreStatus: 100, completionStatus: '已完成', submitStatus: '已提交',teamwork:false,projectType:"刷题" },// 数据
]);

let data_filter : Ref<UnwrapRef<any[]>> = ref([]);

const loading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    filtered();
    showToast('刷新成功');
    loading.value = false;
  }, 1000);
};

function submitStatusColor(status : string) {
  return {
    'text-green': status === '已提交',
    'text-red': status === '未提交'
  };
}

function submitStatusColor_score(score: number) {
  return {
    'text-red': score < 65,
    'text-yellow': score >= 65 && score < 75,
    'text-green': score >= 75 && score < 95,
    'text-pink': score >= 95,
    'text-gray': score === -1,
  };
}

function filtered() {
  let filtered_tmp: Array<{ name: string, class_name: string, stuId: number, course_name:string, task_name: string, scoreStatus: number, completionStatus: string, submitStatus: string ,teamwork: boolean,projectType: string}> = [];
  // 根据 currentFilter 的值来过滤 todos
  data.value.forEach((dtmp, index) => {
    // 添加一个 index_value 属性来存储原始索引
      if (dtmp.course_name === courses.value[selectedCourse.value].text) {
        if(projects.value[projectType.value].text === "全部")
        {
          filtered_tmp.push({ ...dtmp });
        }
        else if(projects.value[projectType.value].text === dtmp.projectType)
        {
          filtered_tmp.push({ ...dtmp });
        }

      }
  });
  console.log(filtered_tmp)
  return filtered_tmp;
}

onMounted(() => {
  // 使用生成的随机数据
  // data.value = generateRandomData(tasks.value, classes.value, 100);
  // console.log(data)
  data_filter.value = filtered()
  console.log(data_filter.value)
});

</script>

<style scoped>
.text-green {
  color: green;
}

.text-pink {
  color: pink;
}

.text-yellow {
  color: #a8a84b;
}

.text-red {
  color: red;
}

.text-gray {
  color: gray;
}

</style>